<template>
	<view class="css-3d">
		<view class="group" v-for="gro in groups" :key="gro.id">
			<div class="at">
				<div class="at__front face"> </div>
				<div class="at__back face"> </div>
				<div class="at__right face"> </div>
				<div class="at__left face"> </div>
				<div class="at__top face"> </div>
				<div class="at__bottom face"> </div>
			</div>
<!-- 			<div class="at">
				<div class="at__front face"> </div>
				<div class="at__back face"> </div>
				<div class="at__right face"> </div>
				<div class="at__left face"> </div>
				<div class="at__top face"> </div>
				<div class="at__bottom face"> </div>
			</div>
			<div class="at">
				<div class="at__front face"> </div>
				<div class="at__back face"> </div>
				<div class="at__right face"> </div>
				<div class="at__left face"> </div>
				<div class="at__top face"> </div>
				<div class="at__bottom face"> </div>
			</div> -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				groups: [{
						id: '0'
					},
					// {
					// 	id: '1'
					// },
					// {
					// 	id: '2'
					// }
				]
			}
		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	.css-3d {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 100vh;
		// background-color: var(--bg1);
		overflow: hidden;

		*,
		*::after,
		*::before {
			margin: 0;
			padding: 0;
			box-sizing: border-box;
			user-select: none;
			transform-style: preserve-3d;
			-webkit-tap-highlight-color: transparent;
			user-select: none;
			outline: none;
			appearance: none;
		}

		.face {
			position: absolute;
		}

		.group {
			position: absolute;
			// transform: perspective(10000px) rotateX(45deg) rotateZ(45deg) translateX(0vw) translateY(0vw) translateZ(0vw);
			transition: transform 100ms linear;

			&:nth-child(1) {
				transform: perspective(10000px) rotateX(45deg) rotateZ(45deg) translateX(0vw) translateY(-42vw) translateZ(0vw);
			}

			&:nth-child(2) {
				transform: perspective(10000px) rotateX(45deg) rotateZ(-45deg) translateX(-95vw) translateY(-8vw) translateZ(0vw);
			}

			&:nth-child(3) {
				transform: perspective(10000px) rotateX(45deg) rotateZ(45deg) translateX(99vw) translateY(58vw) translateZ(0vw);
			}

			.at {
				position: absolute;
				top: 0vw;
				left: 0vw;
				width: 30vw;
				height: 30vw;

				&:nth-child(2) {
					top: 33vw;
				}

				&:nth-child(3) {
					top: 66vw;
				}
			}

			.at__front {
			  width: 30vw;
			  height: 0.6vw;
			  transform-origin: bottom left;
			  transform: rotateX(-90deg) translateZ(36.4vw);
			}
			.at__back {
			  width: 30vw;
			  height: 0.6vw;
			  transform-origin: top left;
			  transform: rotateX(-90deg) rotateY(180deg) translateX(-30vw) translateY(-0.6vw);
			}
			.at__right {
			  width: 30vw;
			  height: 0.6vw;
			  transform-origin: top left;
			  transform: rotateY(90deg) rotateZ(-90deg) translateZ(30vw) translateX(-30vw) translateY(-0.6vw);
			}
			.at__left {
			  width: 30vw;
			  height: 0.6vw;
			  transform-origin: top left;
			  transform: rotateY(-90deg) rotateZ(90deg) translateY(-0.6vw);
			}
			.at__top {
			  width: 30vw;
			  height: 30vw;
			  transform-origin: top left;
			  transform: translateZ(0.6vw);
			}
			.at__bottom {
			  width: 30vw;
			  height: 30vw;
			  transform-origin: top left;
			  transform: rotateY(180deg) translateX(-30vw);
			}

			.at__top {
				overflow: hidden;
			}

			.at__front,
			.ab__front {
				background-color: var(--wall3);
			}

			.at__back,
			.ab__back {
				background-color: var(--wall2);
			}

			.at__right,
			.ab__right {
				background-color: var(--wall2);
			}

			.at__left,
			.ab__left {
				background-color: var(--wall2c);
			}

			.at__top,
			.ab__top {
				background-color: var(--floor1);
			}

			.at__bottom,
			.ab__bottom {
				background-color: var(--wall3);
			}
		}
	}
</style>
